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JavaScript 


In  addition  to  HTML  and  CSS... 

Browsers  have  a  powerful  programming  language  called 
JavaScript  that  runs  in  the  browser 

Actually  not  much  like  Java  -  more  like  C 

Very  powerful  and  flexible  -  we  keep  "discovering"  new 
power 


http://en.wikipedia.org/wiki/JavaScript 


Language  Syntax 


Whitespace  does  not  matter  -  spaces  and  new  lines 
Begin  and  end  of  blocks  are  curly  braces 
Statements  must  end  in  semicolons 


function  message() 
alert("This  alert  box  was  called  with  the  onload  event"); 


Language  Syntax 

>  Javascript  supports  comment  characters  that  start  and 
end  a  comment  and  can  be  multiline  as  well  as  a 
comment  character  that  comments  to  the  end  of  the 
current  line 

function  messageQ 


/*  I  am  a 

multi-line  comment  */ 
alert("This  alert  box  was  called  with  the  onload  event"); 
//  I  am  a  comment  to  the  end  of  one  line 


The  Most  Useful  JavaScript 


The  alert  box  is  often  the  way  we  debug  simple 
JavaScript 

When  it  runs  -  alert  makes  a  pop  up  box 


JavaScript 

Hello  from  JavaScript 


alert("Hello  from  JavaScript"); 


Including  JavaScript  in  a  Page 


Include  an  File  from  a  URL 

Inline  Code 

As  an  Attribute  on  a  Tag 


Including  a  File  from  a  URL 


<html  xmlns="http://www.w3.org/ 1 999/xhtml"> 

<head> 
<title>App  Engine  -  HTML</title> 

<link  href="/static/glike.css"  rel="stylesheet"  type="text/css"  /> 
<script  type="text/javascript"  src=7static/js/jquery- 1 .2.6.min.js"></script> 

</head> 


<body: 
<div  id="header"> 


Inline  Javascript 


<html>  J 

<head> 

</head> 


<body> 

<h  I  >Here  is  my  Document</h  I  > 
<script  type="text/javascript"> 
alert("Hello  from  JavaScript"); 
</script> 

<h  I  >Here  is  my  second  Header</h  I  > 
</body> 
</html> 


Inline  JavaScript 

runs  as  the  page 

loads. 


inline.htm 


Validating  Inline  Javascript 


<h  I  >Here  is  my  Document</h  I  > 
<script  type="text/javascript,,> 

/*<![CDATA[*/ 

alert("Hello  from  JavaScript"); 

/*  ]]>  */ 
</script> 

<h  I  >Here  is  my  second  Header</h  I  > 
</body> 
</html> 


We  add  Javascript 

comments  and  a 

CDATA  tag  to  pass 

XHTML  and 

HMTL4  Strict 

Validation 


inline.htm 


Here  is  my  Document 


JavaScript 

Hello  from  JavaScript 


Here  is  my  Document 
Here  is  my  second  Header 


(    °«    ^ 


<html> 
<head> 
</head> 
<body> 

<h  I  >Here  is  my  Document</h  I  > 
<script  type="text/javascript"> 
alert("Hello  from  JavaScript"); 
</script> 

<h  I  >Here  is  my  second  Header</h  I  > 
</body> 
</html> 


http://www.dr-chuck.com/javascript/one.htm 


Event  Handling 


Certain  tags  have  attributes  which  contain  JavaScript 
which  run  when  things  (events)  "happen"  to  the  tag 

http://www.w3schools.com/jsref/jsref_events.asp 

onchange,  onclick,  onmousedown,  onmouseup  .. 


<a  href="http://www.umich.edu"  onclick="alert('Ouch!')n>Plan  A</a> 


<body> 
<p> 

<a  href="http://www.umich.edu"  onclick="alert('Ouch!')"> 

Plan  A</a> 

</p><p> 

<a  href="http://www.umich.edu"  onclick="alert('Yow!');return  false;": 

Plan  B</a> 

</p> 

</body> 


Returning  false  in  these 
events  means  "don't  do 
what  you  were  going  to 
do".  In  this  case,  Plan  B 
will  not  follow  the  link 
afte  the  popup. 


http://www.dr-chuck.com/javascript/two.htm 


<html> 

<head> 

<script  type="text/javascript"> 

function  messageQ 


http://www.dr-chuck.com/javascript/three.htm 


alert("This  alert  box  was  called  with  the  onload  event"); 


</script> 

</head> 

<body  onload="message()"> 

<hl>HelloWorld</hl> 

</body> 

</html> 


Another 
Event 


http.//www.w3schools.com/js/tryit.asp?filename=tryjs_headsection 


<form  method="post"  action=7apply"> 
<p> 

<label  for="name">Name:</label> 
<input  type="text"  name="name"  id="name7> 
</p> 

<P> 

<label  for="account">  Account:</label> 

<input  type="text"  name="account"  id="account7> 

</p> 

<P> 

<label  for="password">  Password:</label> 

<input  type="password"  name="password"  id="password7> 

</p> 

<input  type="submit"  name="Login7> 

<input  type="button"  onclick="window.location=V,;  return  false;" 
value- 'Cancel"  /> 
</form> 


Document  Object  Model 


http://en.wikipedia.org/wiki/Document_Object_Model 


Document  Object  Model 


JavaScript  can  manipulate  the  current  HTML  docment 

The  "Document  Object  Model"  tells  us  the  syntax  to 
use  to  access  various  "bits"  of  the  current  screen  to 
read  and/or  manipulate 

You  can  even  find  pieces  of  the  model  by  id  attribute 
and  change  them 


http://en.wikipedia.org/wiki/Document_Object_Model 


<input  type="button"  onclick="wjndow.location=V,;  return  false;" 
value="Cancel"  /> 


When  this  button  is  clicked,  go  into  the 

document  model  at  window.location  and 

change  it  to  be  "/",  and  do  not  submit  this 

form. 


http://www.dr-chuck.com/javascript/four.htm 

<a  href="#" 

onclick="document.getElementByld('stuff).innerHTML  =  ,BACK';">BACK</a> 
<a  href="#" 

onclick="document.getElementByld('stuff).innerHTML  =  ,FORTH';">FORTH</a> 


Hello  <b><span  id="stuff'>Stuff</span></b>  there. 

</p> 


Updating  the  Browser 
Document 

This  is  one  reason  why 

you  can  only  have  one  id 

per  document. 


BACK  FORTH 


Hello  Stuff  there. 


BACK  FORTH 


Hello  BACK  there. 


BACK  FORTH 


Hello  FORTH  there. 


JavaScript 
Errors 


Generally  silently  ignored 
byt  hte  browser 

FireFoxrTools  ->  Error 
Console 


http://w\A^w.dr-chuck.com/javascript/five.htm 

<html> 
<body> 

<h  I  >Here  is  my  Document</h  I  > 
<script  type="text/javascript"> 
alort("Hello  from  JavaScript); 
</script> 

<h  I  >Here  is  my  second  Header</h  I  > 
</body> 
</html> 


Error  Console 


CD 


[  All   |  |   Warnings       Messages  ]  [  Clear] 


Code: 


Eva  Late 


Error:  alort  is  rot  defined 

Source  File:  fil  e:  ///Use  rs  /csev  I  Desktop  /publish  /book  Jappenqine/svn/apps/iavascript/error.ht  in 


Line:     7 


FireBug  -  JavaScript  /  DOM 


If  you  are  going  to  do  *any*  non-trivial  JavaScript  and/or  DOM 
manipulation 

1  Get  FireBug  for  FireFox 

1  addons.mozila.org 

Many  Javascript  errors  are  *silent*  -  FireBug  notices  the  errors 


Mozilla  Firefox 

^^                 ^            ^    @file:///Users/csev/Desktop/javascriptystu(f.htrtT    l>        0"  Google 

Q.   K 

Sakai      dr-cfiuck.com      NWA      Chuck's  Media         iPhone  Navigation      13k     CT     SI  182. v,      18k 

.>;'  Disable  -    £.   Cookies   *           CSS  -    .: J  Forms  T    -      Images   *       )  Information  -           Miscellaneous  ~  ^  Out 

ne  T       ^  Resis 

BACK  FORTH 

Hello  Stuff  there. 

■ifr       Inspect         window                                                                                                                              Q, 

«  © 

Console       HTML      CSS      Script    [  DOM  J    Net 

Options  t 

scroll*                                                        0 

scrollY                                                        3 

scrollMaxX                                                 0 

scrollMaxY                                                    0 

status 

default5tatus 

►  parent                                                     Window  stuff, htm 

opener 

►  top                                                              Window  stuff, htm 

►  window                                                       Window  sti/ffhtm 

*■  content                                                      Window  stuff. htm 

t*-  self                                                             Window  stutf,htm 

►  location                                                   file:///Users/cscv /Desktop/javascript)  stuff.htm 

►  history                                                     [  "http://en-us  .wti'h  ,  nioz\'. '.  a  .  com/en- U£/flref ox/2  .  ®.<3  .  17/whotsnew/"  j 

"f ilei/Z/Users/csev/uesktop/JDvascript/stuff .htm"  ] 

►  frames                                                     Window  stuff  htm 

►  navigator                                                 Navigator  appCodeName=Mnz/y/jappName=A(e'f5fj/je 

screen                                                     Screen  top=  0  lcft=  0  width=  1440  height=5PP  pixelDep(h  =  5Z 

►  menubar                                                  BarProp  visible=Orire 

►  toolbar                                                        BarProp  visiblc=friire 

►  locationbar                                                 BarProp  visible=£rt/e 

►  personalbar                                               BarProp  visiblc=fri/e 

►■  statu  s  bar                                                    BarProp  visible=fri/e 

Done 

o  ^ 

JavaScript  Summary 


There  is  a  lot  of  power  in  JavaScript  -  we  keep  "discovering"  new 
uses  and  capabilities  of  JavaScript 

JavaScript  is  increasingly  being  treated  as  a  very  serious  language 
-  including  using  it  in  the  server  as  well  as  the  browser 

People  now  specialize  as  JavaScript  developers 


http://www.w3schools.com/js/js_examples.asp 


JavaScript  "Compilers 


Some  languages  can  be  "compiled"  into  Javascript 

Google  Web  Tool  Kit  -Java 

Ruby  -  Red 

Pyjamas  -  Python 
Google  Chrome  -Very  Fast  Javascript 


Asynchronous  JavaScript  and 

XML  (Ajax) 


http://en.wikipedia.org/wiki/Ajax_(programming) 


In  The  Good  Old  Days 


A  user  would  take  some  action  like  a  click  on  a  link  or  button 


The  Browser  would  make  a  TCP/IP  connection  to  the  web 
server 


The  browser  would  send  a  POST  or  GET  request 

The  Server  would  send  back  a  page  to  display  to  the  user 

Repeat  the  Request-Response  Cycle... 


Browser 


Redraw  Redraw 


Whole 


Whole 


Whole 


Whole 


GET 


GET 


POST 


GET 


Server 


XMLHttpRequest 


By  1999,  Microsoft  wanted  to  move  some  of  the  processing  of  web 
pages  from  the  web  server  to  the  web  browser 

The  idea  was  instead  of  sending  whole  pages  of  HTML  to  the  browser, 
send  out  the  data  to  be  displayed  as  XML  and  then  produce 
presentation  in  JavaScript  in  the  browser 

Originally  a  Microsoft  innovation  -  other  browsers  soon  adopted  the 
idea  and  it  became  a  defacto  standard  with  a  little  variation  between 
browsers  :) 

It  soon  became  clear  that  this  could  send  ^anything*  -  not  just  XML 
back  and  forth  between  a  browser  and  client 


http://en.wikipedia.org/wiki/XMLHttpRequest 


Browser 


Redraw  Update 


Whole 


Fragment      \     /Fragment    1     /  Fragment 


HTTP 
REQ 


HTTP 
REQ 


HTTP 
REQ 


Server 


AjaxArms  Race 


The  race  was  on  to  build  better  and  better  web  sites  that  began 

to  replace  things  like  frames  and  full-screen  updates  with 

Xm I Http Request  operations  and  very  selective  screen  updates. 

With  clever  JavaScript  programmers  -  the  impossible  became 
possible  -  drag  and  drop,  automatic  field  completion  -  automatic 
data  saving.  It  made  the  web  operate  much  more  like  the 
desktop. 

Applications  like  GMail  and  Google  Maps  -  feel  very  un-web. 


Ajax  versus  Request/Response 


Standard  Request/Response 

•  Each  click  presents  a  whole  new  screen 
Ajax  -Asynchronous  JavaScript  and  XML 

•  Each  action  sends  data  and  receives  results  in  the  background. 

•  The  browser  typically  gets  back  a  fragment  of  HTML  or  XML 
which  is  used  to  update  a  portion  of  the  screen  using  the 
browser  document  model 


Lots  of  Flexibility 


When  you  combine  the  ability  to  rewrite  the  Browser  document 
model  with  the  ability  to  interact  with  the  web  server  from 
JavaScript  -  there  is  lots  of  potential  fun 

Different  browsers  did  things  a  *little*  differently  -  this  led  to  the 
rise  of  Ajax  Libraries 


Ajax  Libraries 


Prototype  -  Basic  portability  and  common  functionality 

•  http://www.prototypejs.org/ 
Script.aculo.us  -Animation  and  effects 

•  http://script.aculo.us/ 

jQuery  -  General  purpose  -  http://jquery.com/ 

Google  Web  Toolkit  -  http://code.google.com/webtoolkit/ 


Accessibility  with  Ajax 


It  is  not  perfect 
Needs  further  study 
Lots  of  investment  going  on 
Fluid  Project  -  Univ. Toronto 
1  http://www.fluidproject.org/ 


Flufd 


Designing   software 

that  works  -  for  everyone 


Home 

About  Fluid 

News 

Get  Involved 

Partners 

Technical  Information 

User  Experience 

Meetings 


What  is  Fluid? 

Fluid  is  a  worldwide 
collaborative  project 
to  help  improve  the 
usability  and 
accessibility  of 
community  open 
source  projects  with 


Community  Resources 

*  Fluid  Wiki:  collaborative 
documentation,  technical 
architecture  information, 
and  user  experience 
material  for  the  Fluid 
Project. 

*  Fluid  Blog:  learn  more 
about  the  progress  of 
Fluid  directly  from 


Google  App  Engine 
jQuery  and  Ajax 

ae- 1 2-ajax 


http://ae- 1 2-ajax.appspot.com/ 


Ajax  Enabled  Chat 


We  will  update  the  list  of  messages  in  the  background  every  four 
seconds 


This  way  we  will  see  messages  from  other  people  "appear"  on 
our  screen  -  even  if  we  are  typing 


App  Engine  -  HTML 

*     ►        C     |  <&  |  [  +  |   0http://localhost:SOSC/chat 

>  -  (Q?  ajax 

App  Engine                                                       Sites     Topics 

Chat     Members      Lopout  (csevl 

Appengine  Chat 


[  5ubmit  i 


Yes,  it  was  surprisingly  easy  -  make  sure  to  look  at  the  key()  method  (sally)  Sat  22  Nov  2008 
Have  you  used  a  Reference  yet?  (csev)  Sat  22  Nov  2008 
Hi  there  (sally)  Sat  22  Nov  2008 


//\ 


We  will  put  the  chat  messages  in  a  div 
and  update  the  div  using  Ajax. 


IntallingJQuery 


Go  to  jquery.com  -  download  the  latest  version  -  source  code 
Place  it  in  your  application  under  the  static  folder 


Installing  jQuery 


To  use  the  jQuery  library  in  your  HTML,  you  need  to  include  it 
Typically  this  is  done  in  _base.htm  in  the  <head>  area 


<head> 
<title>App  Engine  -  HTML</title> 

<link  href='7static/glike.css"  rel="stylesheet"  type="text/css"  /> 
<script  type="text/javascript"  src='7static/js/j query- 1 .2.6.min.js"></script> 

</head> 


HTML  Fragments 


We  need  a  page  that  just  gives  us  message  content 
No  head  material  -  not  even  a  body  tag 


App  Engine-  HTML 
[~4~\  >  ]  I  6  |  |fl|  |  +  j   0  hup:  //local  host:8QS0/cha[ 


-'Q'  Google 


o1 


App  Engine 


Sites     Topics     Login 


Appengine  Chat 


(  Submit) 

Yes,  it  was  surprisingly  easy -make  sure  to  look  at  trie  key()  method  (salty)  Sat  22  Nov 
2008 

Have  you  used  a  Reference  yet?  (csev)  Sat  22  Nov  2008 

Hi  there  (sally)  Sal  22  Nov  2008 


http://localhost:S080/me5sages                                                           1 

|*|*||(S||<&||  +  |    0rittn://localliost:BOS<Vmessages 

■r^ 

&  1 

Yes,  it  was  surprisingly  easy  •  make  sure  to  look  at  the  kcyQ  method  (sally)  Sat  22  Nov  2008 
Have  you  used  a  Reference  yet?  (csev)  Sat  22  Nov  2008 
Hi  there  (sally)  Sat  22  Nov  2008 


def  main(): 
application  =  webapp.WSGIApplication([ 

('/login',  LoginHandler), 

('/logout',  LogoutHandler), 

('/apply',  ApplyHandler), 

('/members',  MembersHandler), 

('/chat',  ChatHandler), 

('/messages',  MessagesHandler), 

('/*',  MainHandler)], 

debug=True) 
wsgiref.handlers.CGIHandlerQ.run(application) 


New  Routing  Entry 


class  MessagesHandler(webapp.RequestHandler): 

def  get(self): 

que  =  db.Query(ChatMessage).order("-created"); 

chat_list  =  que.fetch(limit=IO) 

doRender(self,  'messagelist.htm1,  {'chat_list':  chat_list}) 


Retrieve  the  recent  the  ChatMessage  messages  and 
put  them  in  the  context  for  out  new  messages.htm 

template. 


templates\messagelist.htm 


{%  for  chat  in  chatjist  %} 
<p>{{  chattext }}  ({{chat.user.acct}}) 
{{chat.created|date:"D  d  MY"}}</p> 
{%  endfor  %} 


Do  not  extend  _base.htm  -  we  do  not  want 

the  headers.  Loop  through  the  messages  in 

the  context  and  print  out  each  message 

enclosed  in  a  paragraph  tag. 


templates\messages.htm 

{%  for  chat  in  chatjist  %} 
<p>{{  chattext }}  ({{chat.user.acct}}) 
{{chat.created|date:"D  d  MY"}}</p> 
{%  endfor  %} 

^^^^^^^^^^^^^H 

^^^^^^^^^^^^^1     4            |  C  |  |  <J  |  [  +  ]    0http://localhost:8O8O/messages                         *■  Qj 

1  Yes,  it  was  surprisingly  easy  -  make  sure  to  look  at  the  kcy()  method  (sally)  Sat  22  Nov  2008 
1  Have  you  used  a  Reference  yet?  (csev)  Sat  22  Nov  2008 
1  Hi  there                 22  Nov 

{%  extends  "_base.htm"  %} 
{%  block  bodycontent  %} 

<h  I  >Appengine  Chat</h  I  > 

<form  method="post"  action=7chat"> 

»> 
<input  type="text"  name="message" 

size="607> 
<input  type="submit"  name="Chat7> 


</form> 

{%  ifnotequal  error  None  %} 


{{  error  }} 
</p> 
{%  endifnotequal  %} 

chatscreen.htm 


<div  id="chatcontent"> 

Loading... 
</div> 
<script>/*<![CDATA[*/ 
function  updateMsg()  { 
$.ajax({ 
url:  7messages", 
cache:  false, 
success:  function  (frag){ 
$("#chatcontent").html(frag); 


setTimeoutCupdateMsgO',  4000); 


updateMsg(); 
/*  ]]>  */ 
</script> 
{%  endblock  %} 


<div  id="chatcontent"> 

Loading... 
</div> 
<script>  /*<![CDATA[*/ 
function  updateMsg()  { 
$.ajax({ 
url:  "/messages", 
cache:  false, 
success:  function(frag){ 
$("#chatcontent").html(frag); 

} 

}); 

setTimeout('updateMsg()',  4000); 

} 
updateMsg(); 

/*  ]]>  */  </script> 

{%  endblock  %} 

The  chatcontent  div  is  where  we  will 

put  the  messages  which  we  retrieve 

from  the  /messages  url. 

The  $ajax()  call  is  from  jQuery.  It 

retrieves  a  URL  and  then  looks  up  a 

named  div  and  replaces  its  html 

content. 

Then  we  request  that  this  be  done 
every  4  seconds. 

INFO 

2008-11-23  04:00:52,996  index, py]  messages, htm 

INFO 

2006-11-23  04:00:53,01$  dev_qppserver,py]  "GET  /messages?_-1227412852966  HTTP/1. 1" 

200  - 

INFO 

2008-11-23  04:00:56,997  index. py]  messages.htm 

INFO 

2008-11-23  04:00:57,016  dev_qppserver , py]  "GET  /messages?_=1227412856968  HTTP/1.1" 

200  - 

INFO 

2008-11-23  04:01:00,997  index, py]  messages . htm 

INFO 

2008  11-23  04:01:01,013  dev_gppserver  *  py]  "GET  /messages?_-l2274l2860970  HTTP/1, 1" 

200  - 

INFO 

2008-11-23  04:01:05,003  index, py]  messages.htm 

INFO 

2008-11-23  04:01:05,021  dev_appserver , py]  "GET  /messages?_-l227412864972  HTTP/l,!" 

200  - 

INFO 

2008-11-23  04:01:09,005  index, py]  messages.htm 

INFO 

2008-11-23  04:01:09,028  dev_appserver,py]  "GET  /messages?_-l2274l2868976  HTTP/l,!" 

You  can  watch  the  log  as  the  Ajax  requests 

come  in  every  4  seconds. 

The  timestamp  changes  to  make  sure  that  the 

pages  are  not  cached. 

200  - 

class  ChatHandler(webapp.RequestHandler): 

def  get(self): 

que  =  db.Query(ChatMessage).order('-created'); 

chat_list  =  que.fetch(limit=IO) 

doRender( 

self, 

'chatscreen.htm1, 

{  'chatjist':  chatjist }) 


The  chatscreen.htm  no  longer  needs  the  list  of 
messages  since  they  comes  out  in  "/messages". 


class  ChatHandler(webapp.RequestHandler): 

def  get(self): 

que  =  db.Query(ChatMessage).order('-created'); 

chat_list  =  que.fetch(limit=IO) 

doRender( 

self, 

'chatscreen.htm') 


The  chatscreen.htm  no  longer  needs  the  list  of 
messages  since  they  comes  out  in  "/messages". 


Ajax  Summary 


This  is  one  of  hundreds  of  Ajax  techniques  supported 
byJQuery 

It  is  a  very  common  and  useful  pattern 

http://www.jquery.com/  -  much  more  detail 


